<div id="client">
      <div class="left">
        <fieldset>
          <legend>你的身份</legend>
          <input type="text" v-model="app" placeholder="应用" />
          <input type="text" v-model="version" v-if="app" placeholder="版本" />
          <button @click="startOrStop()">
            {{status === "ws连接成功"?"结束":"开始"}}通信
          </button>
          <div class="status">{{status}}</div>
        </fieldset>
        <div v-if="status==='ws连接成功'">
          <textarea v-model="message" placeholder="消息内容"></textarea>
          <fieldset>
            <legend>发送给谁</legend>
            <input type="text" v-model="senderApp" placeholder="应用" />
            <input type="text" v-model="senderVersion" v-if="senderApp" placeholder="版本" />
            <button @click="send()">发送</button>
          </fieldset>
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in recieveMsg" :key="index">
            {{item}}
        </div>
      </div>
    </div>
    <script>
      createApp({
        setup() {
          const version = ref("123");
          const app = ref("car");
          const senderVersion = ref("");
          const senderApp = ref("car");
          const status = ref("ws未连接");
          const message = ref("Hello vue!");
          const recieveMsg = ref([]);
          let ws;

          /*
           * 链接货断开ws
          */
          const startOrStop = () => {
            // 断开链接
            if (ws) {
              ws.close();
              ws = null;
              status.value = "ws未连接";
              return;
            }
            // 建立链接
            if(!app.value){
              alert("请输入应用");
              return;
            }
            ws = io(`http://localhost:3002`, {
              query: {
                app: app.value,
                version: version.value,
              },
              transports: ['websocket']
            });
            ws.on("connect", () => {
              console.log("连接成功，id："+ws.id);
              status.value = "ws连接成功";
            });
            ws.on("disconnect", (e) => {
              console.log("断开连接");
            });
            ws.on('error', (error) => {
              console.error('Error:', error);
            });
          };


          /*
           * 发送消息
          */
          const send = () => {
             if(!senderApp.value){
              alert("请输入要发送的应用");
              return;
            }
            ws.send(
              JSON.stringify({
                app: senderApp.value,
                version: senderVersion.value,
                content: message.value,
              })
            );
          };
          return {
            app,
            version,
            status,
            message,
            startOrStop,
            send,
            senderApp,
            senderVersion,
            recieveMsg
          };
        },
      }).mount("#client");
    </script>